昨天我們成功建立並啟動了 React Native 專案,今天不免俗氣的來一下寫程式的課程最一開始的萬年範例 「Hello World」
對於沒寫過也沒經驗的人,我覺得最好的學習就是抄答案。先找到你想要的答案去試試看,可以動了在研究他是做了什麼,用了哪些東西讓他可以動。
在打開 APP的畫面中其實就是一個 RN的介紹教學。我們可以看到其實裡面有個Hello World 範例。
點進去看看,可以看到範例程式碼。
import React from 'react';
import {Text, View} from 'react-native';
const HelloWorldApp = () => {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Hello, world!</Text>
</View>
);
};
export default HelloWorldApp;
果然是萬年起始範例。那這個要放在哪裡呢?
MyNewProject/
├── android/
├── ios/
├── node_modules/
├── App.tsx <-- 這是我們要修改的地方
└── package.json
修改 App.tsx
:
打開 App.txs
,會看到一排程式碼。不用太緊張,那就是一啓動的那個畫面的程式碼,我們可以大膽把 Hello Word 範例直接複製貼上上去。
就可以在模擬器的畫面看到 Hello World了,第一次修改程式成功了。
在 React 和 React Native 開發中,元件(Component) 是最核心的概念之一。簡單來說,元件就像是應用程式中的「積木」,可以將應用的不同部分模組化,這樣每個部分都可以獨立開發、重複使用。
元件是一個函數或Class:在 React 和 React Native 中,元件本質上是一個 JavaScript 函數或類。它們接收輸入(通常稱為 props)並返回要顯示的 UI 元素(通常是 JSX 語法)。
UI 的可重用部分:元件是一段可重用的 UI 代碼,它可以是頁面中的任何部分——按鈕、標題、表單甚至是整個頁面。每個元件可以單獨開發,並且可以在不同的地方重複使用,這使應用更具結構化且更容易維護。
將 UI 和邏輯封裝在一起:元件不僅負責顯示 UI,它還可以包含處理用戶交互的邏輯(如按鈕點擊、表單驗證等)。這樣可以讓代碼更具模組化,也能提升開發效率。
函數式元件:現代開發中更多使用的是函數式元件,這些元件是一個簡單的函數,接收 props 並返回 UI。
const HelloWorld = (props) => {
return <Text>Hello, {props.name}!</Text>;
};
一個應用程式通常由很多元件組合而成,主元件可以引入其他元件,從而組成一個完整的 UI。
const App = () => {
return (
<View>
<Header />
<Content />
<Footer />
</View>
);
};
在這裡,Header
、Content
和 Footer
都是子元件,組合成一個完整的頁面。
我們把寫在 APP.tsx
裡面的程式碼提出來並新增一個檔案 HelloWorld.tsx
於 components資料夾之下。
MyNewProject/
├── src/
│ ├── components/
│ │ └── HelloWorld.tsx >>>> 新增的檔案
│ └── App.tsx
├── android/
├── ios/
└── package.json
HelloWorld.tsx
import React from 'react';
import {View, Text} from 'react-native';
const HelloWorld = () => {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Hello, world!</Text>
</View>
);
};
export default HelloWorld;
APP.tsx
import React from 'react';
import HelloWorld from './src/components/HelloWorld';
const App = () => {
return (
<HelloWorld />
);
};
export default App;
一樣可以在模擬器看到 Hello world。
style
是用來設定元件的樣式,控制 UI 的外觀和排版。在 React Native 中,style
是以 JavaScript 對象的形式來處理的。網頁也可以使用 JavaScript,或是CSS。
在 React Native 中,會有兩個方式可以來寫 Style:Inline Style 和 StyleSheet.create()
。
1. Inline Style(行內樣式)
寫法: 行內樣式是直接在元件上使用 style
屬性,並以 JavaScript 物件的方式定義樣式。
範例:
import React from 'react';
import { View, Text } from 'react-native';
const HelloWorldApp = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 24 }}>Hello, world!</Text>
</View>
);
};
export default HelloWorldApp;
優點:
缺點:
2. StyleSheet.create()
寫法: StyleSheet.create()
是 React Native 提供的專門處理樣式的 API,它會將樣式定義在一個集中化的樣式表中,並且只在元件中引用。
範例:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const HelloWorldApp = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello, world!</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 24,
},
});
export default HelloWorldApp;
優點:
StyleSheet.create()
會將樣式轉換為底層的原生代碼,這對於效能更有幫助,尤其是當應用變得複雜時。缺點:
今天,使用 Hello world 這個範例和大家說了一下 React的基本精神,元件(Component) 的概念還有 樣式(Style) 的兩種編寫方式行內樣式(Inline Style) 和 StyleSheet.create()
。
明天會開始製作登入頁面UI,和介紹可以使用的UI套件。
又到了我們最後的工商時間啦~~~。Tom有在經營 Pocast,目前比較偏向職場類的閒聊,未來Podcast預計更新與程式軟體開發相關的主題。有興趣的朋友follow一下。
可以透過以下平台收聽: Apple podcast Spotify KKBOX
Linking Tree